<template>
    <nav-bar>
        <template v-slot:default>商品分类</template>
    </nav-bar>
    <br>
    <br>

    <el-tabs tab-position="left"  style="height: 100%" class="demo-tabs">
        <el-tab-pane label="马列毛邓">
            <goods-list-item v-for="(item,index) in mlmd.list" :product="item" :key="index" @click="goDetail(item.id)"></goods-list-item>
        </el-tab-pane>

        <el-tab-pane label="语言文字">
            <goods-list-item v-for="(item,index) in yywz.list" :product="item" :key="index" @click="goDetail(item.id)"></goods-list-item>
        </el-tab-pane>

        <el-tab-pane label="编程世界">
            <goods-list-item v-for="(item,index) in bcsj.list" :product="item" :key="index" @click="goDetail(item.id)"></goods-list-item>
        </el-tab-pane>

        <el-tab-pane label="科幻文学">
            <goods-list-item v-for="(item,index) in khwx.list" :product="item" :key="index" @click="goDetail(item.id)"></goods-list-item>
        </el-tab-pane>

        <el-tab-pane label="综合型">
            <goods-list-item v-for="(item,index) in zhx.list" :product="item" :key="index" @click="goDetail(item.id)"></goods-list-item>
        </el-tab-pane>
    </el-tabs>
</template>

<style lang="scss" scoped>

</style>

<script>
    import { reactive, toRefs} from "vue";
    import NavBar from "@/components/common/navbar/NavBar";
    import TabControl from "@/components/common/tabControl/TabControl";
    import GoodsListItem from "@/components/goodsList/GoodsListItem";
    import {useRouter} from "vue-router";

    export default {
        components:{
            GoodsListItem,
            NavBar,
            TabControl
        },
        setup(){
            const state = reactive({
                mlmd: {
                    list: [
                        {
                            id: 15,
                            url: require('../../assets/images/dxpwx.jpg'),
                            title: '邓小平文选',
                            price: 69,
                            collectCount: 36
                        },
                        {
                            id: 16,
                            url: require('../../assets/images/lnqj.jpg'),
                            title: '列宁全集',
                            price: 73,
                            collectCount: 16
                        },
                        {
                            id: 17,
                            url: require('../../assets/images/mzdsx.jpg'),
                            title: '毛泽东思想',
                            price: 46,
                            collectCount: 38
                        },
                        {
                            id: 18,
                            url: require('../../assets/images/mkszy.jpg'),
                            title: '马克思主义基本原理',
                            price: 88,
                            collectCount: 58
                        },
                    ]
                },
                yywz: {
                    list: [
                        {
                            id: 1,
                            url: require('../../assets/images/rjsg.jpg'),
                            title: '人间失格',
                            price: 88,
                            collectCount: 58
                        },
                        {
                            id: 7,
                            url: require('../../assets/images/bxtbl.jpg'),
                            title: '别想太多了',
                            price: 23,
                            collectCount: 89
                        },
                        {
                            id: 8,
                            url: require('../../assets/images/aqzz.jpg'),
                            title: '阿Q正传',
                            price: 74,
                            collectCount: 12
                        },
                        {
                            id: 5,
                            url: require('../../assets/images/zbycy.jpg'),
                            title: '自卑与超越',
                            price: 92,
                            collectCount: 23
                        },
                    ]
                },
                bcsj: {
                    list: [
                        {
                            id: 9,
                            url: require('../../assets/images/dnzzywx.jpg'),
                            title: '电脑组装与维修',
                            price: 132,
                            currentType: 45
                        },
                        {
                            id: 10,
                            url: require('../../assets/images/JavaWeb.jpg'),
                            title: 'JavaWeb',
                            price: 91,
                            currentType: 45
                        },
                        {
                            id: 11,
                            url: require('../../assets/images/python.jpg'),
                            title: 'Python从入门到实战',
                            price: 114,
                            currentType: 65
                        },
                        {
                            id: 12,
                            url: require('../../assets/images/cyy.jpg'),
                            title: 'C语言从入门到精通',
                            price: 126,
                            currentType: 61
                        },
                        {
                            id: 13,
                            url: require('../../assets/images/plc.jpg'),
                            title: 'PLC编程',
                            price: 152,
                            currentType: 62
                        },
                        {
                            id: 14,
                            url: require('../../assets/images/bnbddbc.jpg'),
                            title: '不能不懂的编程',
                            price: 86,
                            currentType: 32
                        }

                    ]
                },
                khwx: {
                    list: [
                        {
                            id: 6,
                            url: require('../../assets/images/st.jpg'),
                            title: '三体',
                            price: 56,
                            collectCount: 63
                        },
                        {
                            id: 2,
                            url: require('../../assets/images/shj.jpg'),
                            title: '山海经',
                            price: 99,
                            collectCount: 23
                        },
                    ]
                },
                zhx: {
                    list: [
                        {
                            id: 17,
                            url: require('../../assets/images/mzdsx.jpg'),
                            title: '毛泽东思想',
                            price: 46,
                            collectCount: 38
                        },
                        {
                            id: 18,
                            url: require('../../assets/images/mkszy.jpg'),
                            title: '马克思主义基本原理',
                            price: 88,
                            collectCount: 58
                        },
                        {
                            id: 12,
                            url: require('../../assets/images/cyy.jpg'),
                            title: 'C语言从入门到精通',
                            price: 126,
                            currentType: 61
                        },
                        {
                            id: 1,
                            url: require('../../assets/images/rjsg.jpg'),
                            title: '人间失格',
                            price: 88,
                            collectCount: 58
                        },
                        {
                            id: 10,
                            url: require('../../assets/images/JavaWeb.jpg'),
                            title: 'JavaWeb',
                            price: 91,
                            currentType: 45
                        },
                        {
                            id: 8,
                            url: require('../../assets/images/aqzz.jpg'),
                            title: '阿Q正传',
                            price: 74,
                            collectCount: 12
                        },
                        {
                            id: 16,
                            url: require('../../assets/images/lnqj.jpg'),
                            title: '列宁全集',
                            price: 73,
                            collectCount: 16
                        },
                        {
                            id: 13,
                            url: require('../../assets/images/plc.jpg'),
                            title: 'PLC编程',
                            price: 152,
                            currentType: 62
                        },
                        {
                            id: 5,
                            url: require('../../assets/images/zbycy.jpg'),
                            title: '自卑与超越',
                            price: 92,
                            collectCount: 23
                        },
                        {
                            id: 2,
                            url: require('../../assets/images/shj.jpg'),
                            title: '山海经',
                            price: 99,
                            collectCount: 23
                        },
                        {
                            id: 9,
                            url: require('../../assets/images/dnzzywx.jpg'),
                            title: '电脑组装与维修',
                            price: 132,
                            currentType: 45
                        },
                        {
                            id: 7,
                            url: require('../../assets/images/bxtbl.jpg'),
                            title: '别想太多了',
                            price: 23,
                            collectCount: 89
                        },
                        {
                            id: 11,
                            url: require('../../assets/images/python.jpg'),
                            title: 'Python从入门到实战',
                            price: 114,
                            currentType: 65
                        },
                        {
                            id: 14,
                            url: require('../../assets/images/bnbddbc.jpg'),
                            title: '不能不懂的编程',
                            price: 86,
                            currentType: 32
                        },
                        {
                            id: 15,
                            url: require('../../assets/images/dxpwx.jpg'),
                            title: '邓小平文选',
                            price: 69,
                            collectCount: 36
                        },
                        {
                            id: 6,
                            url: require('../../assets/images/st.jpg'),
                            title: '三体',
                            price: 56,
                            collectCount: 63
                        },

                    ]
                }
            })
            const route = new useRouter()
            const goDetail = (id) => {
                route.push({
                    path:'/detail',
                    query:{id}
                })
            }
            return{
                ...toRefs(state),
                goDetail,
            }
        }
    }
</script>

<style>
.el-tab-pane{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 5px;
}

.affix-container {
    text-align: center;
    height: 400px;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
}
</style>
